<template>
  <el-dialog title="添加文章" :visible.sync="dialogFormVisible" width="95%" :close-on-click-modal="false">
    <el-form :model="form">
      <el-form-item label="封面：" prop="cover">
        <el-input v-model="form.cover" autocomplete="off" placeholder="图片 URL" disabled></el-input>
        <ImgUpload @onUpload="uploadImg" ref="ImgUpload"></ImgUpload>
      </el-form-item>

      <el-form-item label="标题：">
        <el-input placeholder="请输入标题" type="text" v-model="form.titles" maxlength="50" show-word-limit></el-input>
      </el-form-item>

      <el-form-item label="内容：">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="form.content">
        </el-input>
      </el-form-item>
    </el-form>
    <div style="margin-top: 20px;text-align: right">
      <button class="cancelcss" @click="dialogFormVisible = false">取 消</button>
      <button class="logincss" @click="SubmitArticles">提 交</button>
    </div>
  </el-dialog>
</template>

<script>
import ImgUpload from "../overall/ImgUpload";
//添加文章
export default {
  name: "ArticleModules",
  components: {ImgUpload},
  data() {
    return {
      dialogFormVisible: false,
      form: {
        cover: '',
        titles: '',
        content: ''
      }
    }
  },
  methods:{
    showoverArticles(data){
      if(data == 1){
        this.form.cover = "";
        this.form.titles = "";
        this.form.content = "";
        this.dialogFormVisible = true;
      }
      else this.dialogFormVisible = false;
    },
    SubmitArticles(){
      //内容添加后，还是需要局部刷新
      let pic = this.form.cover,
        title = this.form.titles,
        content = this.form.content
      if(pic.trim().length > 0 && title.trim().length > 0 && content.trim().length > 0){
        this.axios.post(this.Global.BASE_URL+'/Content/InsertblogContent',
          {P:pic,T:title,C:content}).then((res)=>{
          if("2000" == res.data.msg){
            this.dialogFormVisible = false
            this.$parent.ThisReload()
            this.$CustomMessage_OK('文章内容','添加文章完成！')
          }
          else if("1000" == res.data.msg){
            this.$CustomMessage_WAENING('文章内容','请填写完整！');
          }
          else this.$CustomMessage_WAENING('文章内容','添加失败！');
        }).catch(erroe=>{
          this.$CustomMessage_ERROR('文章内容','内容错误！');
        })
      }else this.$CustomMessage_WAENING('文章内容','请填写完整！');
    },
    uploadImg () {
      this.form.cover = this.$refs.ImgUpload.url
    }
  }
}
</script>

<style scoped>
.cancelcss{
  border: 1px solid #e5e9f2;
  border-radius: 7px;
  padding: 10px 15px;
  outline: none;
}
.logincss{
  border: 1px solid #e5e9f2;
  border-radius: 7px;
  padding: 10px 15px;
  background: #409EFF;
  color: white;
  outline: none;
}
</style>
